

<template>
  <dv-border-box-7  :color="['#084FA0','#06073B']" >
    <div class="container">
      <div class="title_container">
        <span  class="title"></span>
        <span style="margin-left: 10px;font-size: 22px"> 顾客分析</span>
      </div>
        <div style="border-bottom: 2px dashed rgba(8, 79, 160, 1)">
          <div class="work" ref="work" style="width: 100%; height: 250px"></div>
        </div>
      <div style="margin-top: 20px">
        <span style="margin-left: 10px;font-size: 22px;color:rgba(28, 219, 254, 1)"> 长者数据</span>
        <div style="display: flex;margin-top: 20px">
          <div style="width: 50%;display: flex">
            <div>
              <img src="@/assets/img/man.png" style="width: 40px;margin-left: 10px">
            </div>
            <div style="padding: 3px 10px">
              <span style="color: rgba(23, 183, 216, 1);font-size: 14px">男性 55.2%</span>
              <span style="display: block;margin-top: 5px">1360 人</span>
            </div>
          </div>
          <div style="width: 50%;display: flex">
            <div>
              <img src="@/assets/img/woman.png" style="width: 40px;margin-left: 10px">
            </div>
            <div style="padding: 3px 10px">
              <span style="color: rgba(13, 222, 156, 1);font-size: 14px">女性  44.8%</span>
              <span style="display: block;margin-top: 5px">1105 人</span>
            </div>
          </div>
        </div>
        <div>
          <div class="analysis" ref="analysis" style="width: 100%; height: 180px"></div>
        </div>
      </div>
    </div>
  </dv-border-box-7>
</template>
<script>
import * as echarts from 'echarts'
import CountUp from 'vue-countup-v3'
let chart = null
let charts=null
export default {
  components:{
    CountUp
  },
  mounted() {
    chart = echarts.init(this.$refs.work)
    charts = echarts.init(this.$refs.analysis)

    this.setOptions()
    this.getsetOptions()
  },
  methods:{
    getsetOptions(){
      var unit = "人";
      var total=100;
      var data = [
        {status:'60~69',percent:'35.9',value:'865',total:total},
        {status:'70~79',percent:'27.34',value:'674',total:total},
        {status:'80~89',percent:'22.56',value:'556',total:total},
        {status:'90岁以上',percent:'15.01',value:'370',total:total},

      ]

   function getArrByKey(data, k)  {
        let key = k || "value";
        let res = [];
        if (data) {
          data.forEach(function (t) {
            res.push(t[key]);
          });
        }

        return res;
      };
      data = data.sort((a,b) => {
        return b.value - a.value
      });
     const option = {
       grid: {
         left: 100,
         right: 100,
          top:10,
         bottom:30


       },
       tooltip: {
         show: false,
         trigger: 'axis',
         axisPointer: {
           type: 'shadow',
           shadowStyle : {
             color : 'rgba(128, 128, 128, 0.0001)',

           }
         },
         formatter: "{b0}: {c0}%"
       },
       animationDuration: 1500,
       animationEasingUpdate: 'quinticInOut',
       xAxis: {
         show: false
       },
       yAxis: [{
         type: 'category',
         inverse: true,
         axisTick: {
           show: false
         },
         axisLine: {
           show: false,
         },
         axisLabel: {
           margin:90,
           textStyle: {
             align:'left',
             fontSize: 14,
             fontWeight: 'bold',
             color: 'rgba(79, 166, 247, 1)'
           },
         },
         data:  getArrByKey(data, 'status')
       }, {
         type: 'category',
         inverse: true,
         axisLine: {
           show: false
         },
         axisTick: {
           show: false
         },
         axisLabel: {
           textStyle: {
             fontSize: 16,
             fontWeight: 'bold',
             color: '#ffffff'
           },
           formatter: function (value, index) {
             return data[index].percent +'% '
           }
         },
         splitArea: {
           show: false
         },
         splitLine: {
           show: false
         },
         data:  getArrByKey(data, 'percent')
       }, ],
       series: [{
         name: '数据内框',
         type: 'bar',
         itemStyle: {
           normal: {
             barBorderRadius: 30,
             color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ {
               offset: 0,
               color: 'rgba(21, 25, 82,0.3 )'
             },{
               offset: 0.8,
               color: 'rgba(28, 219, 254, 1)'
             }
             ], false),

           }
         },
         label: {
           normal: {
             show: true,
             position: 'right',
             color: 'white',
             fontSize: 14,
             formatter:
                 function(param,index) {

                   return data[param.dataIndex].value+'人';
                 },
           }
         },
         barWidth: 20,
         data:  getArrByKey(data, 'percent')
       },
         {
           name: '外框',
           type: 'bar',
           itemStyle: {
             normal: {
               barBorderRadius: 30,
               color: 'rgba(21, 25, 82, 1)',
             }
           },
           barGap: '-100%',
           z: 0,
           barWidth: 20,
           data:  getArrByKey(data, 'total')
         }

       ]
     };
      charts.setOption(option)
    },
    setOptions() {

      let option = {
        title: {
          text:4197,
          subtext: '总数（人）',
          textStyle: {
            color: '#f2f2f2',
            fontSize: 20,
            align: 'center',
            fontFamily:'sans-serif',
            lineHeight:10

          },
          subtextStyle: {
            fontSize: 12,
            color: 'rgba(79, 166, 247, 1)'
          },
          x: 'center',
          y: 'center',
        },
        // grid:{
        //   top: '20%',
        // },
        tooltip: {
          trigger: 'item',
          formatter: function (params){

            return `
                <div> <span style="display: inline-block;width: 10px;height: 10px;"></span>${params.name}</div>
                <div> <span>占比:</span><span style="margin-left: 8px">${params.percent}%</span></div>
                 <div><span>数量:</span> <span style="margin-left: 8px">${params.value}人</span></div>
             `
          },
          backgroundColor: '#040737',
          borderColor: '#0E8BFF', // 设置边框颜色，这里是绿色
          borderWidth: 2, // 设置边框宽度，这里是2像素
          textStyle: { // 设置文本样式
            color: '#ffffff', // 设置文本颜色
            fontSize: 16 // 设置文本字体大小
          },
        },
        animationDuration: 1500,
        animationEasingUpdate: 'quinticInOut',
        legend: {
          // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） | 'vertical'（垂直）
          orient: 'horizontal',
          // x 设置水平安放位置，默认全图居中，可选值：'center' | 'left' | 'right' | {number}（x坐标，单位px）
          x: 'right',
          // y 设置垂直安放位置，默认全图顶端，可选值：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
          y: '15px',
          itemWidth: 15,   // 设置图例图形的宽
          itemHeight: 15,  // 设置图例图形的高
          textStyle: {
            color: 'rgba(79, 166, 247, 1)'  // 图例文字颜色
          },
          // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
          itemGap: 20,
          data: ['长者会员','普通会员','游客']
        },

        series: [{
          name: '',
          type: 'pie',
          itemStyle: {
            // normal: {
            //   borderWidth: 3,
            //   borderColor: "#030d22"
            // },
            // emphasis: {
            //   shadowBlur: 10,
            //   shadowOffsetX:1 0,
            //   shadowColor: 'rgba(0, 0, 0, 0.5)'
            // },
            normal: {
              // borderColor: 'auto',
              // borderWidth: 2,
              // borderType: 'solid',
              borderRadius: [10, 10, 10, 10], // 分别对应左上、右上、右下、左下的圆角半径
            }
          },
          radius: ['55%', '65%'],
          center: ['50%', '55%'],
          hoverAnimation: true,
          // color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
          label: {
            // color: 'auto'
            normal:{
              formatter: function(params){
                console.log('22222params',params)
                 return params.percent+'%'

              }
            }
          },

          data: [
            { value: 2465, name: '长者会员',
              label:{
                color:"rgba(28, 219, 254, 1)"
              },
              labelLine:{
                lineStyle:{
                  color:"rgba(28, 219, 254, 1)"
                }
              },
              itemStyle:{
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {offset: 0, color: 'rgba(28, 219, 254, 1)'},
                      {offset: 0.8, color: 'rgba(21, 25, 82, 0.3)'}
                    ]
                ),
                borderWidth: 20,
              }
            },
            { value: 1167, name: '普通会员' ,
              label:{
                color:"rgba(13, 222, 156, 1)"
              },
              labelLine:{
                lineStyle:{
                  color:"rgba(13, 222, 156, 1)"
                }
              },
              itemStyle:{
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {offset: 0, color: 'rgba(13, 222, 156, 1)'},
                      {offset: 0.8, color: 'rgba(21, 25, 82, 0.3)'}
                    ]
                ),
                borderWidth: 20,
              }
            },
            { value: 565, name: '游客' ,
              label:{
                color:"rgba(251, 154, 68, 1)"
              },
              labelLine:{
                lineStyle:{
                  color:"rgba(251, 154, 68, 1)"
                }
              },
              itemStyle:{
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {offset: 0, color: 'rgba(251, 154, 68, 1)'},
                      {offset: 0.8, color: 'rgba(21, 25, 82, 0.3)'}
                    ]
                ),
                borderWidth: 20,
              }
            },

          ]
        }]
      };

      chart.setOption(option)
    },
  }
}

</script>
<style scoped lang="scss">
.dv-border-box-7{
  border-radius: 3px;
  position: relative;
  height: 530px;
  .container{
    padding: 10px;
    .title_container{
      position: absolute;
      color: #1CDBFE;
      left: 20px;
      top:20px;
      display: flex;
      align-items: center;
      .title{
        width: 15px;
        height: 28px;
        background: #1CDBFE;
        border-radius: 9px;
        display: inline-block;
      }
    }

  }
}
:deep(.dv-border-svg-container) {
  display: none;
}
</style>
